<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page language="java" 
	import="java.util.*, com.bean.library.Term, com.bean.library.Course, com.bean.library.Paper" %>
<jsp:useBean id="term" class = "com.bean.library.Term" scope="session"></jsp:useBean>
<jsp:useBean id="student" class = "com.bean.library.Student" scope="session"></jsp:useBean>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	HttpSession s = request.getSession();
	Course selectedCourse = (Course)s.getAttribute("selectedCourse");
	ArrayList<Paper> partialPaperList = (ArrayList<Paper>)s.getAttribute("partialPaperList");
	String studentName = student.getStuName();
%>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Model Test</title>
    <link rel="stylesheet" href="../css/simulate.css" type="text/css" />
    <link rel="stylesheet" href="../css/common.css" type="text/css" />
    <link rel="stylesheet" href="../css/left_course.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../scripts/jquery.animate-colors-min.js"></script>
    <script type="text/javascript" src="../scripts/navi_common.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#choose_logo").hover(function () {
                $(this).animate({ backgroundColor: '#30A8F4' }, { speed: 1000, queue: false });
            }, function () {
                $(this).animate({ backgroundColor: '#C35A33' }, { speed: 1000, queue: false });
            });

            var up_hrefColor = $("#href_up").css('color');
            var down_hrefColor = $("#href_down").css('color');
            $("#page_up").hover(function () {
            	$("#submit_page_num").val(parseInt($("#page_num").val(),10)-1);
                $("#href_up").animate({ color: '#000000' }, 0);
            }, function () {
                $("#href_up").animate({ color: up_hrefColor }, 0);
            });

            $("#page_down").hover(function () {
            	$("#submit_page_num").val(parseInt($("#page_num").val(),10)+1);
                $("#href_down").animate({ color: '#000000' }, 0);
            }, function () {
                $("#href_down").animate({ color: down_hrefColor }, 0);
            });

            var old_btn_color;
            $('.paper_operate input:submit').hover(function () {
                old_btn_color = $(this).css('background-color');
                $(this).animate({ backgroundColor: '#30A8F4' }, { speed: 1000, queue: false });
            }, function () {
                $(this).animate({ backgroundColor: old_btn_color }, { speed: 1000, queue: false });
            });
            
            var paper_count = parseInt($("#paper_count").val(),10);
            if(paper_count < 2){
            	//alert(li_count);
            	//var _height = li_count*10;
            	$("#content_choose").css("height",$("#content_left").css("height"));
            }
            /**********翻页区域***************/
            var page_num = parseInt($("#page_num").val(),10);
            var max_page_num = parseInt($("#max_page_num").val(),10);
            
            $("#page_up").click(function(){
            	if(page_num <= 1){
            		return false;
            	}
            	$("#page_turning_form").submit();
            });
            $("#page_down").click(function(){
            	if(page_num >= max_page_num){
            		return false;
            	}
            	$("#page_turning_form").submit();
            });
        });
    </script>
</head>

<body>
<div id="bigContent">
<div id="head">
    <div id="title">
        <div class="title_left">
            <div class="titleText">Students Online Exam Platform</div>
        </div>
        <div class="title_right">
            <div class="avatar"><img src="../image/noavatar.jpg" alt="../image/noavatar.jpg"/></div>
            <div class="userState">
                <div class="userState_big"><a href="#"><%=studentName %></a></div>
                <div class="userState_small"><a href="/Exam1/servlet/SLogoutServlet">logout</a></div>
            </div>
        </div>
    </div>
    <form id="navi_form" action="/Exam1/servlet/SNaviSelectServlet">
	    <div id="navi">
	        <div class="navi_top">
	            <ul class="all_navi">
	            	<li id="navi1" class="each_navi navi1">Examination</li>
	                <li id="navi2" class="each_navi navi2">Practice Test </li>
	                <li id="navi3" class="each_navi navi3">Free Q&A</li>
	            </ul>
	        </div>
	        <div class="navi_bottom">
	            <ul class="all_terms">
	            	<li class="each_term term1">freshman 1</li>
	                <li class="each_term term2">freshman 2</li>
	                <li class="each_term term3">sophomore 1</li>
	                <li class="each_term term4">sophomore 2</li>
	                <li class="each_term term5">junior 1</li>
	                <li class="each_term term6">junior 2</li>
	            </ul>
	        </div>
	    </div>
       	<input type="hidden" value="" name="test_type" id="test_type"/>
        <input type="hidden" value="" name="which_term" id="which_term"/>
    </form>
</div>
<div id="content_choose"  class="boxShadow">
    <div id="choose_logo">
        <div class="choose_logo_text">Choose Your Subject And Begin Test</div>
        <div class="choose_logo_img"></div>
    </div>
    <div id="content_left">
        <div id="courses">
            <div id="courses_title">Courses</div>
            <form id="course_form" action="/Exam1/servlet/SCourseSelectServlet" method="post">
	            <div id="courses_details">
	                <ul id="courses_list">
					<%
						ArrayList<Course> courseList = term.getCourseList();
						Iterator<Course> courseIt = courseList.iterator();
						int courseNum = 0;
						while(courseIt.hasNext()){
							courseNum++;
							Course course = (Course)courseIt.next();
							String courseName = course.getCourseName();
							String courseId = course.getCourseId();
					%>
	                	<li class="<%="li"+courseNum%>" id="<%=courseId%>"><div class="each_course_text"><%=courseName %></div></li>
	                <%} %>	
	                </ul>
	             	<input type="hidden" id="li_count" value="<%=courseNum%>"/>
	            </div>
	            <input type="hidden" value="" id="select_course" name="select_course"/>
	            <input type="hidden" value="" id="select_course_name" name="select_course_name"/>
	            <input type="hidden" value="practice" id="test_type" name="test_type"/>
            </form>
        </div>
    </div>
    <div id="content_right">
    <%
    	if(selectedCourse!=null){
    		String courseName = selectedCourse.getCourseName();
        	int paperCount = 0;
        	int startIndex = selectedCourse.getStartIndex();
        	int prePageNum = startIndex;
        	int nextPageNum = startIndex + 2;
        	int curPageNum = startIndex + 1; 
        	int totalSize = selectedCourse.getBriefPaperList().size();
        	int maxPageNum = (totalSize%5==0)?(totalSize/5):(totalSize/5 + 1);
   	%>
        <div id="subjects_name"><%=courseName %></div>
    <%		
    		if(selectedCourse.getBriefPaperList()!=null){	  	
    %>
        <div id="papers">
            <div id="papers_details">
                <ul id="papers_list">
                <%
                	Iterator<Paper> partialPaperIt  = partialPaperList.iterator();
                	while(partialPaperIt.hasNext()){
                		paperCount++;
                		Paper paper = partialPaperIt.next();
                		String paperName = paper.getPaperName();
                		int paperId = paper.getPaperId();
               	%>
                	<li id="paper1" class="paper1">
                        <div id="paper1_title" class="paper_title"><%=paperName %></div>
                        <div id="paper1_details" class="paper_details">
                            <div id="paper1_create_time" class="paper_create_time">create time:<%=paper.getCreateTime() %></div>
                            <div id="paper1_who_create" class="paper_who_create">creator:<%=paper.getCreatorName() %></div>
                            <div id="paper1_submit_number" class="paper_submit_number">submit number:<%=paper.getSubmitNum() %></div>
                        </div>
                        <div id="paper1_operate" class="paper_operate">
                            <form action="/Exam1/servlet/GeneratePaperServlet" method="get"
                            	 class="start_answer_form">
                                <input type="submit" class="btn_begin_answer" value="Let's begin"/>
                                <input type="hidden" value="<%=paperId %>" name="paper_id"/>
                            </form>
                        </div>
                    </li>
        		<%}%>                    
                </ul>
                <input id="paper_count" type="hidden" value="<%=paperCount%>"/>                 
            </div>
        </div>
        <form id="page_turning_form" action="/Exam1/servlet/GetSumilatePaperListServlet" method="get">
	        <div id="page_turning">
	            <div id="page_up_down">
	                <div id="page_up">
	                    <div id="page_up_text">previous page</div>
	                </div>
	                <div id="page_down">
	                    <div id="page_down_text">next page</div>
	                </div>              
	            </div>
	            <input id="page_num" name="page_num" type="hidden" value="<%=curPageNum%>"/>
	            <input id="max_page_num" type="hidden" value="<%=maxPageNum%>"/>
	            <input id="submit_page_num" name="submit_page_num" type="hidden" value=""/> 
	        </div>
        </form>        
        <%}else{ %>
        <div id="subjects_name"><%=courseName %></div>
        <div id="papers">
            <div id="papers_details">
                <ul id="papers_list">
                	<li id="paper1" class="paper1">
                        <div id="paper1_title" class="paper_title"><%="There are currently no papers"%></div>
                    </li>
                </ul>
                <input id="paper_count" type="hidden" value="<%=paperCount%>"/>                 
            </div>
        </div>                                    
        <%}}else{ %>
        <div id="subjects_name"><%="Please select a course first"%></div>
        <input id="paper_count" type="hidden" value="0"/>                  	
        <%} %>
    </div>
    <div id="content_bottom"></div>   
</div>
</div>
</body>
</html>